<template>
  <div v-if="historyList.length > 0" class="container">
    <div class="header">
      <span style="font-size:20px;font-weight:bold">浏览记录</span>
      <div style="display:flex;align-items: center;">
        <div @click="clearHistory" style="margin-left:20px;width:100%;display: flex;align-items: center;cursor:pointer">
          <delete theme="outline" size="18" fill="#8a919f" :strokeWidth="2"/>
          <span style="margin-left:5px;color:#8a919f">清空记录</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="history-list">
<!--        <div class="time">-->
<!--          <icon-time theme="filled" size="18" fill="#5e7ce0" :strokeWidth="2"/>-->
<!--          <span style="margin-left:5px;">2023-06-13</span>-->
<!--        </div>-->
        <div class="detail" v-for="history in historyList" :key="history.id">
          <div class="head">
            <tiny-tag v-if="history.type === 0" effect="dark" type="info">文章</tiny-tag>
            <tiny-tag v-else effect="dark" type="warning">帖子</tiny-tag>
            <span class="title" @click="toDetail(history.type,history.id)">{{history.title}}</span>
          </div>
          <div class="main">
            <div class="left">
              <div class="content" style="color:#9398a3" v-if="history.type === 0">
                  {{history.content}}
              </div>
<!--              <div class="footer">-->
<!--                <span>ikun</span>-->
<!--                <span style="color:#ddd;margin:0 10px;">|</span>-->
<!--                <span style="color:#949494;">141阅读</span>-->
<!--              </div>-->
            </div>
            <div class="right">
              <img :src="history.coverImage" width="150" height="100" alt="封面">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="container">
    <div class="header">
      <span style="font-size:20px;font-weight:bold">浏览记录</span>
      <div style="display:flex;align-items: center;">
        <div @click="clearHistory" style="margin-left:20px;width:100%;display: flex;align-items: center;cursor:pointer">
          <delete theme="outline" size="18" fill="#8a919f" :strokeWidth="2"/>
          <span style="margin-left:5px;color:#8a919f">清空记录</span>
        </div>
      </div>
    </div>
    <div class="show-main" style="margin-bottom:10px;">
      <tiny-user-head
          class="head-item"
          type="label"
          round
          v-model="imgText">

      </tiny-user-head>
      <tiny-button type="info" plain @click="$router.push('/')">去首页</tiny-button>
    </div>
  </div>
</template>

<script setup>
import {
  Modal,
  Tag as TinyTag,
  UserHead as TinyUserHead,
  Button as TinyButton
} from '@opentiny/vue'
import {onMounted, ref} from 'vue'
import {useRoute,useRouter} from "vue-router";
import request from "../utils/request.js";
import {Delete, Time} from '@icon-park/vue-next'


document.title = '足迹'
// const IconTime = Time
const route = useRoute()
const router = useRouter()
const userId = route.params.userId
const pageNum = ref(1)
const pageSize = ref(15000000)
const articleList = ref([])
const postList = ref([])
const historyList = ref([])
const queryParam = ref({
  pageParam:{
    pageNum:pageNum.value,
    pageSize:pageSize.value,
  },
  userId
})
const imgText = '暂无'


// 清空历史记录
const clearHistory = () => {
  request.delete(`/api/users/histories/${userId}`).then(res => {
    if (res.code === 1){
      queryArticleHistory()
      Modal.message({message: res.data, status: 'success'})
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}

// 跳转历史详细页
const toDetail = (type,id) => {
  let path = ''
  if (type === 0){
    // 跳转文章
    const {href} = router.resolve(`/article/detail/${id}`)
    path = href
  }else {
    // 跳转帖子
    const {href} = router.resolve(`/post/detail/${id}`)
    path = href
  }
  window.open(path,'_blank')
}

// 查询用户的帖子历史记录
const queryPostHistory = () => {
  request.post('/api/users/posts/histories/page',queryParam.value).then(res => {
    if (res.code === 1){
      postList.value = res.data.map(v => {
        v.type = 1
        return v
      })
      historyList.value = [...postList.value,...articleList.value]
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}

// 查询用户的文章历史记录
const queryArticleHistory = () => {
  request.post('/api/users/articles/histories/page',queryParam.value).then(res => {
    if (res.code === 1){
      articleList.value = res.data.map(v => {
        v.type = 0
        // v.content = md.render(v.content) // 将markdown转为html
        v.content = v.description // 这里使用简介，转换为html具有html标签
        return v
      })
      queryPostHistory()
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryArticleHistory()


</script>

<style lang="less" scoped>
.main{
  .history-list{
    .detail{
      .main{
        display: flex;
        //align-items: center;
        justify-content: space-between;
        border-bottom:1px solid #ddd;
      }
      .head{
        .title{
          font-size:17px;
          font-weight: bold;
          color:#86909c;
          margin-left:10px;
          cursor:pointer;
        }
      }
      margin:15px 0;
    }
    .time{
      font-size:14px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;
      margin-bottom:5px;
    }
  }
}
.header{
  display:flex;
  //align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.container{
  width:88%;
  margin-right:200px;
  border:1px solid #949494;
  border-radius:3px;
  padding:0 10px;
}

</style>
